<template>
  <div class="channel-edit">
    <van-cell :border='false' title="我的频道">
      <van-button @click='isEdit = !isEdit' round class='edit-button' size='mini' plain type="danger">{{isEdit ? '完成' : '编辑'}}</van-button>
    </van-cell>
    <van-grid class="my-grid" :gutter="10">
      <van-grid-item @click='onMyChannel(index, item.id)' :class="index === active ? 'active' : ''" v-for="(item, index) in myChannels" :key="item.id" :text="item.name">
        <van-icon v-show="isEdit && index!==0" slot="icon" name="close" />
      </van-grid-item>
    </van-grid>
    <van-cell :border='false' title="推荐频道"></van-cell>
    <van-grid class='recommend-grid' :gutter="10">
      <van-grid-item @click="addmyChannels(item)" icon='plus' v-for="item in recommendChannels" :key="item.id" :text="item.name" />
    </van-grid>
  </div>
</template>

<script>
import { getAllChannels, addUserChannel, deleteMyChannel } from '@/api/channel.js'
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage.js'
export default {
  name: 'Channeledit',
  data () {
    return {
      allChannels: [],
      isEdit: false
    }
  },
  props: {
    myChannels: {
      type: Array,
      required: true
    },
    active: {
      type: Number,
      required: true
    }
  },
  computed: {
    // 推荐数据
    // recommendChannels () {
    //   const newArr = this.allChannels.filter(item => {
    //     // 所有数据的每一项 是否在 我的频道数据库里
    //     // 如果在我的频道数据库里查到了 false
    //     // 如果在我的频道数据库里没有查到 true
    //     const findItem = this.myChannels.find(myChannelsItem => {
    //       // find 返回值
    //       // 如果条件为 true 返回当前这一项的数据
    //       // 如果条件为 false 返回 undefined
    //       return myChannelsItem.id === item.id
    //     })
    //     if (findItem) {
    //       return false
    //     } else {
    //       return true
    //     }
    //   })
    //   return newArr
    // }
    // 计算推荐频道的数据
    recommendChannels () {
      return this.allChannels.filter(i => !this.myChannels.find(myi => myi.id === i.id)
      )
    },
    ...mapState(['user'])
  },
  created () {
    this.loadAllChannels()
  },

  methods: {
    async loadAllChannels () {
      try {
        const { data: res } = await getAllChannels()
        this.allChannels = res.data.channels
      } catch (err) {
        console.dir(err)
        this.$toast.fail('获取失败!')
      }
    },
    // 点击添加频道
    async addmyChannels (item) {
      this.myChannels.push(item)
      if (this.user) {
        // 已登陆
        try {
          await addUserChannel({
            id: item.id, // 频道 id
            seq: this.myChannels.length // 频道的 序号
          })
          this.$toast.success('添加成功!')
        } catch (error) {
          this.$toast('保存失败!')
        }
      } else {
        // 未登陆
        setItem('TOKEN_CHANNELS', this.myChannels)
      }
    },
    // 点击我的频道
    onMyChannel (index, id) {
      if (this.isEdit) {
        if (index === 0) return
        if (index <= this.active) {
          this.$emit('updateActive', this.active - 1, true)
        }
        this.myChannels.splice(index, 1)
        this.deleteChannel(id)
      } else {
        this.$emit('updateActive', index, false)
      }
    },
    // 删除数据持久化
    async deleteChannel (id) {
      if (this.user) {
        // 已登陆
        try {
          await deleteMyChannel(id)
          this.$toast.success('删除成功!')
        } catch (error) {
          this.$toast('删除失败!')
        }
      } else {
        // 未登陆
        setItem('TOKEN_CHANNELS', this.myChannels)
      }
    }
  }
}
</script>

<style scoped lang='less'>
  .channel-edit {
    margin: 80px 5px;
    // 我的频道
    .edit-button {
      width: 104px;
      height: 48px;
      color: #f85959
    }
    /deep/.van-grid {
      .van-grid-item {
        padding-right: 0 !important;
      }
      .van-grid-item__content {
        width: 155px;
        height: 86px;
        background: #f4f5f6;
        border-radius:6px;
      }
      .van-grid-item__content--surround::after {
        border: none;
      }
    }
    // 推荐频道
    /deep/.recommend-grid {
      .van-grid-item__content--center {
        flex-direction: row;
        color: #222;
      }
      .van-icon {
        font-size: 25px;
      }
      .van-grid-item__icon+.van-grid-item__text {
        margin-top: 2px;
        margin-left: 2px;
      }
    }
    // 我的频道
    /deep/.my-grid {
      .van-icon-close {
        position: absolute;
        right: -15px;
        top: -15px;
        font-size: 35px;
        color: #ccc;
      }
      .van-grid-item__icon+.van-grid-item__text {
        margin-top: 2px;
        margin-left: 2px;
      }
      .active {
        .van-grid-item__text {
          color: red;
        }
      }
      .van-grid-item__icon-wrapper {
        position: unset;
      }
    }
  }
</style>
